import React, { useState, useEffect } from 'react';
import { Button } from 'antd';

export function ClickHook() {
    let index = 1;
    let [count, setCount] = useState(9);
    let [todos, setTodos] = useState([{ text: '学习 hook'}]);

    useEffect(() => {
        document.title = `you clicked ${count} time`;
    });

    const updateTodos = () => {
        index++;
        let newTodos = todos.concat([{text: `fadsfdf${index}`}]);
        setTodos(newTodos);
    };

    return (
        <div>
            <p>you clicked {count} times</p>
            {
                todos.map((it, index) => {
                    return (
                        <div key={index}>
                            {it.text}
                        </div>
                    );
                })
            }
            <Button onClick={() => setCount(count + 1)}>
                click++
            </Button>
            <Button onClick={() => setCount(count - 1)}>
                click--
            </Button>
            <Button onClick={updateTodos}>
                setTodos
            </Button>
        </div>
    );
}